import { themeBaseColor } from '@/utils/color/theme'
export const dataFormat = (data, key, value) => {
  const res: any = []
  if (data && data.length > 0) {
    data.forEach(item => {
      res.push({
        label: item[key],
        value: item[value]
      })
    })
  }
  return res
}

export const initMapTooltip = () => {
  const { t } = useI18n() // 国际化
  return {
    trigger: 'item',
    formatter: params => {
      if (params.data) {
        return `<div class="echarts-tooltip">
          <div class="tooltip-list">
            <div class="item-tooltip">
              <span class="icon" style="background:${params.color}"></span>
              <span class="name">${t('chart', 'region')}</span>
              <div class="num">${params.data.name ? params.data.name : t('chart', 'islands')}</div>
            </div>
            <div class="item-tooltip">
              <span class="icon" style="background:${params.color}"></span>
              <span class="name">${t('chart', 'count')}</span>
              <div class="num">${params.data.value}</div>
            </div>
          </div>
        </div>`
      }
    }
  }
}

export const initMapSeries = systemConfig => {
  return {
    type: 'map',
    label: {
      show: false
    },
    itemStyle: {
      areaColor: systemConfig.value.isLight ? '#eeeeee' : 'rgba(0,0,0,.1)'
    },
    emphasis: {
      label: {
        show: false
      },
      itemStyle: {
        areaColor: themeBaseColor.warning
      }
    } // ,
    // select: {
    //   label: {
    //     show: false
    //   },
    //   itemStyle: {
    //     areaColor: themeBaseColor.warning
    //   }
    // }
  }
}

export const initMap3DSeries = systemConfig => {
  return {
    type: 'map3D',
    // 标签的相关设置
    label: {
      show: false, // (地图上的城市名称)是否显示标签
      distance: 5,
      formatter: function (params) {
        return params.name ? params.name : ' '
      },
      textStyle: {
        // 标签的字体样式
        color: systemConfig.value.isLight ? '#eeeeee' : '#ffffff',
        fontSize: 10 // 字体大小
      }
    },
    itemStyle: {
      color: 'transparent',
      opacity: 1, // 图形的不透明度 [ default: 1 ]
      borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
      borderColor: '#286ECA' // 图形描边的颜色。[ default: #333 ]
    },
    emphasis: {
      label: {
        show: false
      },
      itemStyle: {
        color: themeBaseColor.warning,
        opacity: 0.5
      }
    },
    viewControl: {
      projection: 'orthographic', // 投影方式
      orthographicSize: 80,
      autoRotate: false, // 是否开启视角绕物体的自动旋转查看
      autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw'，也可以取 'ccw'
      autoRotateSpeed: 10, // 物体自传的速度。角度 / 秒
      autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔
      damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子
      distance: 120, // 默认视角距离主体的距离
      alpha: 40, // 视角绕 x 轴，即上下旋转的角度
      beta: 10, // 视角绕 y 轴，即左右旋转的角度
      center: [0, 0, 0], // 视角中心点
      animation: true, // 是否开启动画
      animationDurationUpdate: 1000, // 过渡动画的时长
      animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
    }
  }
}
